<template>
  <div class="radarmap" :class="[{ 'radarmap-right': direction === 'right' }, { 'radarmap-row': direction === 'left' }]">
    <div class="radarmap-info flex-col align-items-center" :class="[{ 'flex-end': direction === 'right' },  { 'pl-15': direction === 'right' }, { 'pr-15': direction === 'left' } , { 'flex-start': direction === 'left' }]">
      <div class="f-20 bold radarmap-infotitle">{{title}}</div>
      <div class="f-14 mt-12 radarmap-infoprebox">
        <pre class="radarmap-infopre">{{desc}}</pre>
      </div>
    </div>
    <div class="radarmap-canvas">
      <slot></slot>
    </div>
  </div> 
</template>

<script setup>
import { ref, computed, defineProps } from 'vue'
defineProps({
  tags: {
    type: Array,
    default: () => []
  },
  direction: {
    type: String,
    default: 'left'
  },
  title: {
    type: String,
    default: ''
  },
  desc: {
    type: String,
    default: ''
  }

})
</script>

<style lang="scss" scoped>
 .radarmap{
  margin-top: 40px;
  width: 988px;
  overflow: hidden; 
  &-right{
    display: flex;
    flex-direction: row-reverse;
  }
  &-row{
    display: flex;
    flex-direction: row!important;
  }
  &-info{
    flex:1; 
    justify-content: center;
  }
  &-infopre{
    word-break: break-all;
    white-space: pre-line; 
    text-align: left;  
  }
  &-infotitle{
    text-align: center;
  }
  &-canvas{
    width: 498px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden; 
  }
  &-infoprebox{
    position: relative;
    width: 498px;
    // margin: 0 auto;
    overflow: hidden;
  }
 }

 @media screen and (max-width: 996px) {
 .radarmap{
  display: flex;
  flex-direction: column!important;
  align-items: center; 
  justify-content: center;
  &-info{
    margin-bottom: 40px;
  }
 }
}
</style>